<template>
  <div>
    <el-form v-for="(item, index) of forms" :key="index" :inline="true">
      <el-form-item label="名称">
        <el-select v-model="item.name">
          <el-option v-for="option of options" :key="option.value" 
          :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="值">
        <el-input-number v-if="isNumberType(item.name)" v-model="item.value"></el-input-number>
        <el-color-picker show-alpha v-else-if="isColorType(item.name)" v-model="item.value"></el-color-picker>
        <el-select v-else-if="isSelectType(item.name)" v-model="item.value">
          <el-option v-for="(option, index) of getSelectOptions(item.name)" :key="index"
          :label="option.label" :value="option.value"></el-option>
        </el-select>
        <el-input v-else v-model="item.value"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-minus" type="danger" circle @click="handleDelete(index)"></el-button>              
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="3" :offset="10">
        <el-button icon="el-icon-plus" type="primary" circle @click="handleAdd"></el-button>              
      </el-col>
    </el-row>
  </div>
</template>

<script>
var _ = require('lodash')
import ConfigUtil from '@/utils/graph-utils/configUtil.js'

export default {
  name: 'DynamicFormPanel',
  data() {
    return {
      forms: [],
      options: []
    }
  },
  methods: {
    isNumberType(name) {
      return ConfigUtil.isNumberAttrType(name)
    },

    isColorType(name) {
      return ConfigUtil.isColorAttrType(name)
    },

    isSelectType(name) {
      return ConfigUtil.isSelectAttrType(name)
    },

    getSelectOptions(name) {
      return ConfigUtil.getSelectOptions(name)
    },

    handleAdd() {
      this.forms.push({
        name: '',
        value: ''
      })
    },

    handleDelete(index) {
      this.forms.splice(index, 1)
    },

    setPanelInfos(forms, options) {
      this.forms = forms || []
      this.options = options || []
    },

    getPanelInfos() {
      const infos = {}
      for (const form of this.forms) {
        _.set(infos, form.name, form.value)
      }
      return infos
    }
  }
}
</script>